<template>
      <div class="Input-box">
          <input type="text" placeholder="输入任务名称" v-model="taskName">
          <span @click="handleClick">新增</span>
      </div>
</template>

<script>
export default {
     data(){
         return{
             taskName:''
         }
     },
     methods:{
         handleClick(){
             if(this.taskName){
                // 调用数据仓库中的同步方法addTask,新增一个任务,并保存到数据仓库中的state.tasklist中
                 this.$store.commit('addTask',this.taskName) 
             }else{
                 alert('请输入任务名称')
             }
         }
     }
}
</script>

<style lang="scss" scoped>
      .Input-box{
          display: flex;
          justify-content: space-between;
          align-content: center;
      }

      .Input-box input{
          flex: 1;
          height: 40px;
    border: none;
    outline: none;
    padding-left: 20px;
    background-color: #f5f5f5;
      }
      .input-box span{
    width: 60px;
    text-align: center;
    color: rgb(26, 28, 28);
}
</style>